<template>
	<cl-crud @load="onLoad">
		<template #slot-add="{scope}">
			<el-button
				size="mini"
				type="primary"
				@click="addAccount()"
				v-permission="$service.coupon.account.permission.add"
			>
				<i class="el-icon-plus"></i>添加账号
			</el-button>
		</template>
		<template #table-column-usernames="{scope}">
			<div class="staff-list">
				<el-tag
					v-for="(item, index) in scope.row.usernames"
					:key="index"
					type="warning"
					size="small"
					style="margin: 4px"
					>{{ item }}</el-tag
				>
			</div>
		</template>
	</cl-crud>
</template>

<script>
export default {
	data() {
		return {
			crud: null,
			options: {
				staff: []
			},
			selects: {}
		};
	},

	created() {
		this.getStaffList();
	},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.coupon.account)
				.set('table', {
					columns: [
						{
							type: 'index',
							label: '序号',
							align: 'center',
							width: '60'
						},
						{
							label: 'AppKey',
							prop: 'appKey',
							align: 'center'
						},
						{
							label: 'AppSecret',
							prop: 'appSecret',
							align: 'center',
							width: 300
						},
						{
							label: '阿里妈妈广告位',
							prop: 'adzoneId',
							align: 'center'
						},
						{
							label: '运营人',
							prop: 'usernames',
							align: 'center'
						},
						{
							label: '登记时间',
							prop: 'createTime',
							align: 'center'
						},
						{
							label: '备注',
							prop: 'remark',
							align: 'center'
						}
					]
				})
				.set('upsert', {
					props: {
						'label-width': '120px',
						width: '470px'
					},
					items: [
						{
							prop: 'appKey',
							label: 'AppKey',
							component: {
								name: 'el-input',
								props: {
									clearable: true
								},
								attrs: {
									placeholder: '请输入AppKey'
								}
							},
							rules: [
								{
									required: true,
									message: 'AppKey不能为空'
								},
								{
									validator: (rule, value, callback) => {
										let reg = /^[a-zA-Z0-9]/;
										if (!reg.test(value)) {
											callback(new Error('不能输入中文和特殊字符'));
										} else {
											callback();
										}
									}
								}
							]
						},
						{
							prop: 'appSecret',
							label: 'AppSecret',
							component: {
								name: 'el-input',
								props: {
									clearable: true
								},
								attrs: {
									placeholder: '请输入AppSecret'
								}
							},
							rules: [
								{
									required: true,
									message: 'AppSecret不能为空'
								},
								{
									validator: (rules, value, callback) => {
										let reg = /^[a-zA-Z0-9]/;
										if (!reg.test(value)) {
											callback(new Error('不能输入中文和特殊字符'));
										} else {
											callback();
										}
									}
								}
							]
						},
						{
							prop: 'adzoneId',
							label: '阿里妈妈广告位',
							component: {
								name: 'el-input',
								props: {
									clearable: true
								},
								attrs: {
									placeholder: '请输入App对应的阿里妈妈广告位',
									type: 'tel'
								}
							},
							rules: [
								{
									required: true,
									message: '输入的必须是App对应的阿里妈妈广告位'
								},
								{
									validator: (rules, value, callback) => {
										let reg = /^[0-9]*$/;
										if (!reg.test(value)) {
											callback(new Error('请输入正确的阿里妈妈广告位'));
										} else {
											callback();
										}
									}
								}
							]
						},
						{
							prop: 'userIds',
							label: '运营人',
							value: [],
							component: {
								name: 'el-select',
								options: [],
								props: {
									clearable: true,
									multiple: true,
									filterable: true
								},
								attrs: {
									placeholder: '请选择运营人'
								}
							}
							// rules: {
							// 	required: true,
							// 	message: '运营人不能为空'
							// }
						},
						{
							component: {
								name: 'describe',
								render() {
									return (
										<p style="min-width:140%;margin-left: -120px;line-height: 16px;color: #FF4400;font-size: 13px;">
											温馨提示：AppKey、AppSecret和阿里妈妈广告位需来自同一推广位！
										</p>
									);
								}
							}
						},
						{
							prop: 'remark',
							label: '备注',
							component: {
								name: 'el-input',
								props: {
									clearable: true
								},
								attrs: {
									placeholder: '请输入备注'
								}
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'slot-add', 'slot-filter', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('open', async () => {
					app.setData(
						'upsert.items[prop:userIds].component.options',
						this.options.staff.map(e => {
							return {
								label: e.username,
								value: e.id
							};
						})
					);
				})
				.on('refresh', async (params, { next, render }) => {
					let { list } = await next(params);

					list = list.map(e => {
						return {
							...e,
							usernames: e.usernames ? e.usernames.split(',') : []
						};
					});

					render(list);
				})
				.on('submit', (isEdit, data, { next }) => {
					next({
						...data,
						userIds: data.userIds.join(',')
					});
				})
				.done();

			app.refresh();
		},
		// 添加角色弹窗
		addAccount() {
			this.crud.add();
		},
		// 获取运营人列表
		getStaffList() {
			this.$service.account.extension.staffList().then(res => {
				this.options.staff = res;
			});
		}
	}
};
</script>

<style lang="stylus" scoped></style>
